<!DOCTYPE html>
<html>
<head>
    <title>旋转的正方体</title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        // 三大组建：场景(scene)、相机(camera)、渲染器(renderer)==>使用相机将场景渲染到网页上去
        var scene = new THREE.Scene();//场景 
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//透视相机
        var renderer = new THREE.WebGLRenderer();//渲染器
        renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染器的大小为窗口的内宽度，即内容区的宽度
        document.body.appendChild(renderer.domElement);

        // 添加物体到场景中
        var geometry = new THREE.CubeGeometry(1,1,1);//几何体：CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
        var material = new THREE.MeshBasicMaterial({color: 0xff6799});//材质
        var cube = new THREE.Mesh(geometry, material); 
        scene.add(cube);
        camera.position.z = 5;

        // 实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染
        // 离线渲染：事先渲染好一帧一帧的图片
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);//渲染 render( scene, camera, renderTarget, forceClear )
        }
        render();
    </script>
</body>
</html>